import React from "react";

class FormDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'Soulkey',
      info: 'Personal Infomation',
      city: 'beijing',
      flag: true,
      gender: 'male'
    }
  }

  render() {
    // 受控组件
    // return (
    //   <div>
    //     <p>{this.state.name}</p>
    //     <label htmlFor="inputName">姓名：</label>
    //     <input id="inputName" value={this.state.name} onChange={this.onInputChange} type="text" />
    //   </div>
    // )

    // return (
    //   <div>
    //     <select value={this.state.city} onChange={this.selChange}>
    //       <option value="beijing">北京</option>
    //       <option value="nanjing">南京</option>
    //       <option value="shanghai">上海</option>
    //     </select>
    //     <p>{this.state.city}</p>
    //   </div>
    // )

    return (
      <div>
        male <input type="radio" name="gender" value='male' checked={this.state.gender === 'male'} onChange={this.radioChange}/> <br />
        female <input type='radio' name='gender' value='female' checked={this.state.gender === 'female'} onChange={this.radioChange}></input>
        <p>{this.state.gender}</p>
      </div>
    )
  }

  radioChange = (e) => {
    this.setState({
      gender: e.target.value
    })
  }

  selChange = (e) => {
    this.setState({
      city: e.target.value
    })
  }

  onInputChange = (e) => {
    this.setState({
      name: e.target.value
    })

  }
}

export default FormDemo
